<template>
	<view class="charts">


		<view class="card">

			<u-cell-group class="card__head">
				<u-cell-item title="收益趋势" :arrow="false
				" :center="true" bg-color="#ffffff">
					<u-image :src="thumb" width="30" height="30" slot="icon" class="card__icon mr-10"></u-image>
				</u-cell-item>

			</u-cell-group>

			<qiun-data-charts type="line" :opts="opts" :chartData="tradeChartData" class="charts__column" />


		</view>

		<view class="card">

			<u-cell-group class="card__head">
				<u-cell-item title="收益趋势" :arrow="false
				" :center="true" bg-color="#ffffff" :value-style="{ color: '#9D60FF' }">
					<u-image :src="thumb" width="30" height="30" slot="icon" class="card__icon mr-10"></u-image>
				</u-cell-item>

			</u-cell-group>

			<scroll-view class="scroll-view_H" scroll-x="true">

				<view class="scroll-header">
					<view class="scroll-item">
						日期
					</view>
					<view class="scroll-item">
						总收益
					</view>
					<view class="scroll-item">
						交易收益
					</view>
					<view class="scroll-item">
						流量卡收益
					</view>
					<view class="scroll-item">
						其他收益
					</view>
					<view class="scroll-item">
						返现收益
					</view>

				</view>

				<view class="scroll-content" v-for="(item,index) in list">
					<view class="scroll-item">
						{{item.date}}
					</view>
					<view class="scroll-item">
						{{item.totalAmount}}
					</view>
					<view class="scroll-item">
						{{item.posProfile}}
					</view>
					<view class="scroll-item">
						{{item.flowProfit}}
					</view>
					<view class="scroll-item">
						{{item.otherProfit}}
					</view>
					<view class="scroll-item">
						{{item.activeProfit}}
					</view>
				</view>
			</scroll-view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: '收益趋势',
				thumb: '/static/image/benefit/icon_trans_profit.png',
				opts: {
					color: ["#9D60FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 10, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						line: {
							type: "curve",
							width: 2,
							activeType: "solid"
						}
					}
				},
				tradeChartData: {},
				data: {
					"trendType": 3, //1 7天 2 30天 3 半年
					"channelNo": ""
				},
				list: []
			};
		},
		mounted() {
			this.getLists()
		},
		methods: {
			getLists() {
				let categories = [],
					series = [];
				const _let = this;
				this.$zx.order_api.incomeTrend(this.data).then((data) => {
					_let.list = data;
					data.forEach(function(item, index, array) {
						categories.push(item.date);
						series.push(item.totalAmount);
						console.log("data=" + JSON.stringify(data))
						let res = {
							categories: categories,
							series: [{
								name: "交易额",
								data: series
							}]
						};
						_let.tradeChartData = JSON.parse(JSON.stringify(res));
					});
				});

			}
		},
	};
</script>

<style scoped lang="scss">
	.charts {
		padding: 20rpx 0;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	.card {
		background-color: white;
		border-radius: 20rpx;
		margin: 20rpx;


		&__icon {
			margin-bottom: 15rpx;
		}
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;

	}

	.scroll-header,
	.scroll-content {
		display: flex;
		flex-wrap: nowrap;


	}

	.scroll-item {
		flex-shrink: 0;
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;


	}
</style>